<template>
  <div class="singerBD">
    <van-nav-bar
      title="艺人百科"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon @click="onClickRight" name="share" size="18" />
      </template>
    </van-nav-bar>
    <div class="mess">
      <div class="pic" v-if="data1.user">
        <img :src="data1.user.avatarUrl" alt="" />
      </div>
      <div>
        <p v-if="data1.user">{{ data1.user.nickname }}</p>
        <p>
          <span>745.3万&nbsp;粉丝</span>
          <span>4&nbsp;关注</span>
          <span>已关注98天</span>
        </p>
      </div>
    </div>
    <van-tabs v-model="activeName">
      <van-tab title="基本信息" name="a">
        <div class="zhuye">
          <div class="baike">
            <p class="ji">基本信息</p>
            <p v-if="this.data1.identify" class="vip">
              <img :src="this.data1.identify.imageUrl" alt="" /><span>{{
                this.data1.identify.imageDesc
              }}</span>
            </p>
            <p class="name" v-if="this.data1.artist">
              艺人名：{{ this.data1.artist.name }}
            </p>
            <p class="name1" v-if="this.data1.user">
              昵称：{{ this.data1.user.nickname }}
            </p>
            <p class="shen">身份：歌手、作词、作曲</p>
            <p class="bir" v-if="this.bir > 0">
              <span>生日： {{ this.bir | formatDates }} </span>
            </p>
            <p class="year" v-if="this.year">
              村龄：{{ this.year }}年({{ this.time | formatDates }}注册)
            </p>
          </div>
        </div>
      </van-tab>
      <van-tab title="歌手简介" name="b">
        <div class="jian">
          <p class="ji">歌手简介</p>
          <p class="jianjie">{{ this.jian }}</p>
        </div>
      </van-tab>
      <van-tab title="获奖成就" name="c">内容 3</van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from "vant";
import axios from "axios";
import { formatDate } from "../follow/filters.js";

import "../../assets/font-follow/vantChange.css";
export default {
  data() {
    return {
      data: "",
      data1: "",
      data2: "",
      year: "",
      time: "",
      bir: "",
      jian: "",
      activeName: "b",
    };
  },
  computed: {},
  watch: {},
  filters: {
    formatDates(time) {
      var data = new Date(time);
      return formatDate(data, "yyyy-MM-dd");
    },
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      Toast("按钮");
    },
    async desc(id) {
      // 获取关注歌手简介
      const res = await axios.get(
        "http://192.168.31.27:3000/artist/desc?id=" + id,
        {
          withCredentials: true,
        }
      );

      // 获取关注歌手简介
      this.data = res.data;
      this.jian = res.data.briefDesc;
      console.log(this.data);
      const res1 = await axios.get(
        "http://192.168.31.27:3000/artist/detail?id=" + id,
        {
          withCredentials: true,
        }
      );
      this.data1 = res1.data.data;
      console.log(this.data1);

      //获取关注用户详情
      const userid = res1.data.data.user.userId;
      const res2 = await axios.get(
        "http://192.168.31.27:3000/user/detail?uid=" + userid,
        {
          withCredentials: true,
        }
      );

      // console.log(res2.data);
      this.year = Math.ceil(res2.data.createDays / 365);
      this.time = res2.data.createTime;
      this.bir = res2.data.profile.birthday;
    },
  },

  created() {
    const id = this.$route.params.id;
    this.desc(id);
  },
  mounted() {},
  components: {
    top,
  },
};
</script>
<style scoped>
.pic {
  margin-left: 20px;
}
.pic img {
  border-radius: 60px;
  width: 60px;
}
.ji {
  font-size: 22px;
  font-weight: 550;
  margin: 10px 0 20px 20px;
}
.baike .vip {
  line-height: 30px;
  margin-left: 20px;
  color: #6e6e6e;
}
.baike .vip img {
  width: 30px;
  margin-right: 5px;
  vertical-align: top;
}
.baike .vip span {
  font-size: 20px;
}
.baike .name {
  font-size: 20px;
  margin-left: 20px;
  margin-top: 10px;
  color: #6e6e6e;
}
.baike .name1 {
  font-size: 20px;
  margin-left: 20px;
  margin-top: 10px;
  color: #6e6e6e;
}
.baike .shen {
  font-size: 20px;
  margin-left: 20px;
  margin-top: 10px;
  color: #6e6e6e;
}
.baike .bir {
  font-size: 20px;
  margin-left: 20px;
  margin-top: 10px;
  color: #6e6e6e;
}
.baike .year {
  font-size: 20px;
  margin-left: 20px;
  margin-top: 10px;
  color: #6e6e6e;
}
.jianjie {
  font-size: 17px;
  line-height: 20px;
  margin-left: 15px;
  letter-spacing: 1px;
}
</style>
